<template>
  <div class="main">
    <div class="cotent">
      <div class="page-sty">
        <img src="@/assets/images/user/shop_img.png" class="top-img" alt="">
        <div class="search-sty">
          <div class="top">
            <div class="level-One-Category">
              <div v-for="(item, index) in categoryList" :key="index" class="line-list">
                <div :class="currentOneIndex === index ? 'select-one-tet' : 'one-text'"
                  @click="selectCategory(index, item)">
                  {{ item.label }}
                </div>
                <div v-if="currentOneIndex === index" class="line"></div>
              </div>
            </div>
            <div class="right">
              <Input v-model="form.productName" :placeholder="$t('estimation.pleaseEnterProductName')" class="input-sty"
                @on-enter="changeMet(form.productName)">
              <img src="@/assets/images/user/search.png" class="icon-search" slot="prefix" alt="">
              </Input>
            </div>
          </div>
          <div class="level-Two-Category">
            <div :class="currentTwoIndex === childIndex ? 'select-two-text' : 'two-text'"
              v-for="(childItem, childIndex) in selectedChildren" :key="childIndex"
              @click="selectTwoCategory(childIndex, childItem)">
              {{ childItem.label }}
            </div>
          </div>
        </div>
        <div class="loading-wrap" v-if="loading">
          <t-loading></t-loading>
        </div>
        <div class="detail" v-if="dataList.length">
          <Row :gutter="22">
            <Col span="4" v-for="(item, index) in dataList" :key="index">
            <div class="product-list" @click="lookDet(item,index)">
              <img :src="item.mainImg" class="pd-img" alt="">
              <div class="pd-name">{{ item.title }}</div>
              <div class="amount">{{ userCurrency.code }} {{ item.price }}</div>
            </div>
            </Col>
          </Row>
        </div>
				<div class="more-btn" v-if="dataList.length && !noData">
				  <Button class="btn" :loading="btnLoading" @click="onLoadMore">
				    {{ $t('goods.viewMore') }}
				  </Button>
				</div>
        <div class="empty" v-if="dataList.length === 0">
          <img src="@/assets/images/empty/empty_prize.png" class="empty-icon" alt="">
          <div class="desc-text">{{ $t('header.time_text_desc') }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { toSeoFriendsChannel } from '@/common/common'
import { queryProduct, queryCategorySelectTree } from "@/api/product";
import TLoading from "@/components/t-loading";
import { detailPoint } from '@/api/user';

export default {
  components: { TLoading },
  data() {
    return {
      categoryList: [],
      selectedCategory: null,
      dataList: [],
      currentOneIndex: 0,
      currentTwoIndex: 0,
      loading: false,
      noData: false, // 是否还有更多数据
      btnLoading: false,
      form: {
        levelOneCategoryId: 0,
        levelTwoCategoryId: 0,
        pageNo: 1,
        pageSize: 42,
        productName: ""
      }
    }
  },
  computed: {
    ...mapState({
      userCurrency: (state) => state.user.userCurrency,
      userInfo: state => state.user.userInfo,
    }),
    selectedChildren() {
      if (this.selectedCategory) {
        return this.selectedCategory.children;
      } else {
        return [];
      }
    }
  },
  created() {
    this.getCategory();
    this.getData();
  },
  methods: {
    getCategory() {
      queryCategorySelectTree().then((res) => {
        this.categoryList = res.result;
      })
    },
    selectCategory(index, item) {
      this.dataList = [];
      this.form.pageNo = 1;
      this.currentTwoIndex = 0;//重置掉
      this.currentOneIndex = index;
      this.selectedCategory = item;
      this.form.levelOneCategoryId = item.value;
			if(item.children && item.children.length){//有2级分类
				this.form.levelTwoCategoryId = item.children[0].value;
			}else{
				delete this.form.levelTwoCategoryId;
			}
      this.getData();
    },
    selectTwoCategory(childIndex, childItem) {
      this.dataList = [];
      this.form.pageNo = 1;
      this.currentTwoIndex = childIndex;
      this.form.levelTwoCategoryId = childItem.value;
      this.getData();
    },
    getData() {
      this.loading = true;
      queryProduct(this.form).then((res) => {
        let data = res.result.records;

        for (let i = 0; i < data.length; i++) {
          this.dataList.push(data[i]);
        }

        // this.form.pageNo = this.form.pageNo + 1;
        // 判断是否还有数据可加载
        if (this.form.pageNo > res.result.pages) {
          this.noData = true;
        } else {
          this.noData = false;
        }

        this.loading = false;
      }).catch(() => {
        this.loading = false;
      })
    },
    changeMet(val) {
      this.dataList = [];
      this.form.pageNo = 1;
      if (val !== '') {
        this.getData();
      }
    },
    lookDet(item,index) {
      const query = {};
      if (this.userInfo.inviteCode) {
        query.inviteCode = this.userInfo.inviteCode
      }
      const channelId = toSeoFriendsChannel(item.channel);
      let toUrl = this.$router.resolve({
        path: `/product/${channelId}/${item.spu}`,
        query
      });
			let data = {
				channel:3,
				position:`${this.currentOneIndex + 1}-${index + 1}`,
				detailUrl:`${this.$store.state.config.config.webDomain}/product/${channelId}/${item.spu}`,
				productChannel:item.channel,
				productType:item.categoryName,
				spuNo:item.spu,
				price:item.price
			}
			detailPoint(data)
      window.open(toUrl.href);
    },
    onLoadMore() {
			this.form.pageNo ++;
      this.getData();
    }
  }
}
</script>
<style lang="less" scoped>
.main {
  .content {
    height: 100%;
    background: #FFFFFF;

    .page-sty {
      padding-bottom: 100px;

      .top-img {
        width: 100%;
      }

      .search-sty {
        padding: 0 160px;
        margin-top: 40px;

        .top {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .level-One-Category {
            display: flex;
            align-items: center;
            gap: 44px;

            .line-list {
              display: flex;
              flex-direction: column;
              align-items: center;

              .one-text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 20px;
                color: #767B93;
                line-height: 23px;
                padding-bottom: 6px;
                cursor: pointer;
              }

              .line {
                width: 16px;
                height: 4px;
                background: #FF186B;
                border-radius: 42px 42px 42px 42px;
              }
            }

            .select-one-tet {
              font-family: PingFang SC, PingFang SC;
              font-weight: 600;
              font-size: 20px;
              color: #1E1714;
              line-height: 23px;
              padding-bottom: 6px;
            }
          }

          .right {
            .input-sty {
              :deep(.ivu-input) {
                width: 390px;
                height: 52px;
                background: #F7F9FC;
                border-radius: 29px 29px 29px 29px;
                border: none;
                padding-left: 56px;
                font-size: 18px;
              }

              :deep(.ivu-input-prefix) {
                padding-left: 24px;
              }

              .icon-search {
                width: 24px;
                height: 24px;
              }
            }
          }
        }

        .level-Two-Category {
          display: flex;
          align-items: center;
          gap: 24px;
          margin-top: 20px;

          .two-text {
            min-width: 72px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 16px;
            color: #000000;
            line-height: 19px;
            padding: 4px 20px;
            background: #F7F9FC;
            border-radius: 20px 20px 20px 20px;
            cursor: pointer;
          }

          .select-two-text {
            min-width: 72px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 19px;
            padding: 4px 20px;
            background: #1E1714;
            border-radius: 20px 20px 20px 20px;
            cursor: pointer;
          }
        }
      }

      .loading-wrap {
        min-height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
			.more-btn {
			  text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top:32px;
			  .btn {
			    min-width: 240px;
			  }
			}
      .detail {
        padding: 0 160px;

        .product-list {
          margin-top: 32px;
          cursor: pointer;

          .pd-img {
            width: 248px;
            height: 248px;
						object-fit: cover;
          }

          .pd-name {
            width: 248px;
            height: 48px;
            white-space: pre-line;
            /*允许换行*/
            overflow: hidden;
            text-overflow: ellipsis;
            /*省略号*/
            display: -webkit-box;
            -webkit-box-orient: vertical;
            /*行向垂直排列*/
            -webkit-line-clamp: 2; //*限制2
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 18px;
            color: #333333;
            line-height: 24px;
            margin-top: 12px;
          }

          .amount {
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 24px;
            color: #FF186B;
            line-height: 24px;
            margin-top: 8px;
          }
        }

        
      }

      .empty {
        text-align: center;
        height: 550px;

        &-icon {
          width: 260px;
          margin-top: 56px;
        }

        .desc-text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24px;
          color: #AEB0B9;
          line-height: 24px;
          margin-top: 20px;
        }
      }
    }
  }
}
</style>
